<template>
  <div class="channeledit-container">
    <van-cell-group center :border="false">
      <van-cell center :border="false">
        <div slot="title">我的频道</div>
        <van-button
          type="danger"
          size="small"
          plain
          round
          @click="clearStatus = !clearStatus"
        >{{ clearStatus ? '完成' : '编辑' }}
        </van-button>
      </van-cell>
      <van-grid :gutter="10">
        <van-grid-item v-for="(channel, index) in channelLists" :key="index" @click="onClickItem(channel, index)">
          <div slot="text" :class="{textactive : index === active}">{{ channel.name }}</div>
          <van-icon v-if="(clearStatus && index !== 0)" slot="icon" name="clear" />
        </van-grid-item>
      </van-grid>
    </van-cell-group>
    <van-cell-group center :border="false">
      <van-cell center :border="false">
        <div slot="title">频道推荐</div>
      </van-cell>
      <van-grid :gutter="10">
        <van-grid-item v-for="(recommendChannel, index) in recommendChannels" :key="index" @click="onAddChannel(recommendChannel)">
          <div slot="text" class="grid-item-wrap">
            <span>{{ recommendChannel.name }}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
  </div>
</template>
<script>
import { allChannels, deleteChannels, addChannels } from '@/api/home'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  name: 'channelEdit',
  data () {
    return {
      // 编辑按钮的关闭状态
      clearStatus: false,
      // 全部频道
      allChannelLists: []
    }
  },
  props: {
    channelLists: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  methods: {
    // 获取全部频道列表
    async getAllChannels () {
      const res = await allChannels()
      this.allChannelLists = res.data.data.channels
    },
    // 我的频道点击事件
    onClickItem (channel, index) {
      // 判断编辑按钮的状态,决定跳转页面还是删除频道操作
      if (this.clearStatus) {
        // 删除操作
        this.deleteChannels(channel, index)
      } else {
        // 跳转操作
        this.switchChannel(channel, index)
      }
    },
    // 频道删除操作
    async deleteChannels (channel, index) {
      this.channelLists.splice(index, 1)
      // 数据持久化
      if (this.user) {
        // 用户登录, 调用接口删除用户指定频道
        await deleteChannels(channel.id)
      } else {
        // 用户不是登录状态, 本地存储删除指定频道
        setItem('user-channels', this.channelLists)
      }
    },
    // 切换频道
    switchChannel (channel, index) {
      // 将当前点击的索引传给父组件
      this.$emit('update-active', index)
      // 关闭父组件弹出层
      this.$emit('close-channel')
    },
    // 添加频道
    async onAddChannel (recommendChannel) {
      this.channelLists.push(recommendChannel)
      // 数据持久化
      if (this.user) {
        // 用户登录状态, 将用户所选频道存入后端
        await addChannels({
          id: recommendChannel.id,
          seq: this.channelLists.length
        })
      } else {
        // 用户未登录装填, 将用户所选频道存入本地存储
        setItem('user-channels', this.channelLists)
      }
    }
  },
  computed: {
    ...mapState(['user']),
    // 频道推荐列表 = 全部频道 - 用户已有频道
    recommendChannels () {
      return this.allChannelLists.filter(allchannel => {
        return !this.channelLists.find(channel => {
          return allchannel.id === channel.id
        })
      })
    }
  },
  created () {
    this.getAllChannels()
  }
}
</script>
<style lang="less">
.channeledit-container{
  padding-top: 55px;
  .van-cell-group{
    margin-bottom: 20px;
    .van-cell--center{
      .van-cell__title{
        font-size: 16px;
        color: #333;
        line-height: 50px;
      }
      .van-cell__value{
        .van-button--plain.van-button--danger{
          width: 52px;
          height: 24px;
          font-size: 12px;
        }
      }
    }
    .van-grid{
      .van-grid-item__content--center{
        background: #f4f5f6;
        position: relative;
        font-size: 14px;
          color: #222;
        .van-grid-item__icon-wrapper{
          position: absolute;
          right: -8px;
          top: -8px;
          .van-icon{
            font-size: 20px;
          }
        }
        .textactive{
          color: red !important;
        }
        .grid-item-wrap{
          display: flex;
          justify-content: center;
          align-items: center;
          span{
            font-size: 12px;
            color: #222;
          }
        }
      }
    }
  }
}
</style>
